<template>
  <div class="demo-inner-divider">tree 基础</div>
  <div class="explainText">
    基础用法：<span>最简单的用法，展示可选中，默认展开功能。</span>
  </div>
  <e-tree :data="data"></e-tree>
  <div class="explainText">
    可勾选：<span>设置属性 show-checkbox 可以对节点进行勾选。</span>
  </div>
  <e-tree :data="data1" show-checkbox></e-tree>
  <div class="explainText">
    点击标题展开节点：<span>设置属性 expand-node，在点击节点标题时，会展开/收起子节点。</span
    >
  </div>
  <e-tree :data="data2" expand-node></e-tree>
  <div class="explainText">
    异步加载子节点：
    <p>
      使用 load-data 属性可以异步加载子节点，需要给数据增加 loading
      来标识当前是否在加载中。
    </p>
    <p>
      load-data 第一个参数为当前节点信息；执行 load-data
      的第二个参数，将需要添加的数据传入。
    </p>
    <p>如果某节点不包含 loading 和 children 字段，则不会应用异步加载效果。</p>
  </div>
  <e-tree :data="data3" :load-data="loadData" show-checkbox></e-tree>
  <div class="explainText">
    默认展开、选中、勾选和禁用：
    <p>
      给节点设置 expand、selected、checked 和 disabled
      可以将节点设置为展开、选中、勾选和禁用。
    </p>
    <p>设置属性 multiple 可进行多选。</p>
  </div>
  <e-tree :data="data4" :load-data="loadData" show-checkbox multiple></e-tree>
  <div class="explainText">
    右键菜单：
    <p>
      节点数据开启字段 contextmenu，可以配合 slot contextMenu
      实现点击右键弹出菜单。
    </p>
  </div>
  <e-tree :data="data6" @on-contextmenu="handleContextMenu">
    <template #contextMenu>
      <e-dropdownItem @click="handleContextMenuEdit">编辑</e-dropdownItem>
      <e-dropdownItem @click="handleContextMenuDelete" style="color: #ed4014">删除</e-dropdownItem
      >
    </template>
  </e-tree>
  <tree-md class="markdown-body"></tree-md>
</template>
<script>
import treeMd from '../../docs/tree.md'
export default {
  name: 'DemoTree',
  components: {
    treeMd,
  },
  data() {
    return {
      data: [
        {
          title: 'parent 1',
          expand: true,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              children: [
                {
                  title: 'leaf 1-1-1',
                },
                {
                  title: 'leaf 1-1-2',
                },
              ],
            },
            {
              title: 'parent 1-2',
              expand: true,
              children: [
                {
                  title: 'leaf 1-2-1',
                },
                {
                  title: 'leaf 1-2-1',
                },
              ],
            },
          ],
        },
      ],
      data1: [
        {
          title: 'parent 1',
          expand: true,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              children: [
                {
                  title: 'leaf 1-1-1',
                },
                {
                  title: 'leaf 1-1-2',
                },
              ],
            },
            {
              title: 'parent 1-2',
              expand: true,
              children: [
                {
                  title: 'leaf 1-2-1',
                },
                {
                  title: 'leaf 1-2-1',
                },
              ],
            },
          ],
        },
      ],
      data2: [
        {
          title: 'parent 1',
          expand: true,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              children: [
                {
                  title: 'leaf 1-1-1',
                },
                {
                  title: 'leaf 1-1-2',
                },
              ],
            },
            {
              title: 'parent 1-2',
              expand: true,
              children: [
                {
                  title: 'leaf 1-2-1',
                },
                {
                  title: 'leaf 1-2-1',
                },
              ],
            },
          ],
        },
      ],
      data3: [
        {
          title: 'parent',
          loading: false,
          children: [],
        },
      ],
      data4: [
        {
          title: 'parent 1',
          expand: true,
          selected: true,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              children: [
                {
                  title: 'leaf 1-1-1',
                  disabled: true,
                },
                {
                  title: 'leaf 1-1-2',
                },
              ],
            },
            {
              title: 'parent 1-2',
              expand: true,
              children: [
                {
                  title: 'leaf 1-2-1',
                  checked: true,
                },
                {
                  title: 'leaf 1-2-1',
                },
              ],
            },
          ],
        },
      ],
      buttonProps: {
        type: 'default',
        size: 'small',
      },
      data6: [
        {
          title: 'parent 1',
          expand: true,
          contextmenu: true,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              contextmenu: true,
              children: [
                {
                  title: 'leaf 1-1-1',
                  contextmenu: true,
                },
                {
                  title: 'leaf 1-1-2',
                  contextmenu: true,
                },
              ],
            },
            {
              title: 'parent 1-2',
              expand: true,
              contextmenu: true,
              children: [
                {
                  title: 'leaf 1-2-1',
                  contextmenu: true,
                },
                {
                  title: 'leaf 1-2-1',
                  contextmenu: true,
                },
              ],
            },
          ],
        },
      ],
      contextData: null,
    }
  },
  methods: {
    loadData(item, callback) {
      setTimeout(() => {
        const data = [
          {
            title: 'children',
            loading: false,
            children: [],
          },
          {
            title: 'children',
            loading: false,
            children: [],
          },
        ]
        callback(data)
      }, 1000)
    },
    append(data) {
      const children = data.children || []
      children.push({
        title: 'appended node',
        expand: true,
      })
      data.children = children
    },
    remove(root, node, data) {
      const parentKey = root.find((el) => el === node).parent
      const parent = root.find((el) => el.nodeKey === parentKey).node
      const index = parent.children.indexOf(data)
      parent.children.splice(index, 1)
    },
    handleContextMenu(data) {
      this.contextData = data
    },
    handleContextMenuEdit() {
      this.$Message.info('Click edit of' + this.contextData.title)
    },
    handleContextMenuDelete() {
      this.$Message.info('Click delete of' + this.contextData.title)
    },
  },
}
</script>
<style>
.explainText {
  /* display: flex; */
  font-size: 14px;
  color: #9013fe;
  margin: 10px 0px;
}
.explainText > span {
  font-size: 14px;
  color: #6f7d96;
  padding-left: 10px;
}
.explainText > p {
  font-size: 14px;
  color: #6f7d96;
  padding-left: 10px;
}
</style>
